<template>
  <div id="app">
    <el-row>
      <!-- 默认按钮 -->
      <el-button>默认按钮</el-button>
    </el-row>
    
    <!-- 输入框，在master里边修改把test111111改成test2分支啊绑定防抖函数 -->
      <!-- 输入框，test2分支啊绑定防抖函数 -->
    <el-input 
      v-model="inputValue" 
      placeholder="输入内容触发防抖" 
      @input="debouncedInputChange" 
      style="margin: 20px 0; width: 300px;">
    </el-input>
    
    <!-- 表格组件 -->
    <el-table
      ref="multipleTable"  
      :data="tableData"  
      tooltip-effect="dark"  
      style="width: 100%"  
      @selection-change="handleSelectionChange"> <!-- 监听选择变化事件 -->
       <!-- 表格的选择列 网页端在以下修改下2222秒修改-->
      <!-- 表格的选择列 我就要本地改上面写的  16点44分42秒上传-->
      <el-table-column
        type="selection"
        width="55">
      </el-table-column>
      
      <!-- 表格的日期列 test1提交 改一下了16点43分12秒上传-->
      <el-table-column
        label="日期"
        width="120">
        <template slot-scope="scope">
          {{ scope.row.date }}这个是可以自定义类型
        </template>
      </el-table-column>
      
      <!-- 表格的姓名列 16.39.59分提交-->
      <el-table-column
        prop="name"
        label="姓名"
        width="120">
      </el-table-column>
      
      <!-- 表格的多个地址列 我修改了文件-->
      <el-table-column
        prop="address"
        label="地址1"
        show-overflow-tooltip>
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址2"
        show-overflow-tooltip>
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址3">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址4">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址5">
      </el-table-column>
    </el-table>
    <router-view/>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 表格数据
      tableData: [
        {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-08',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-06',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-07',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }
      ],
      multipleSelection: [], // 存储表格选中的行
      debouncedInputChange: null, // 防抖函数绑定的事件
      inputValue: '' // 输入框的值
    };
  },
  methods: {
    // 防抖函数
    debounce(func, wait) {
      let timeout;
      return function (...args) {
        const context = this;
        clearTimeout(timeout);
        timeout = setTimeout(() => func.apply(context, args), wait);
      };
    },
    // 展开行变化时的回调
    expandchange() {
      console.log("8888888888888888888888");
    },
    // 异步加载数据的方法
    load(tree, treeNode, resolve) {
      setTimeout(() => {
        resolve([
          {
            id: 31,
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
          },
          {
            id: 32,
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
          }
        ]);
      }, 1000);
    },
    // 输入框内容变化时的回调
    handleInputChange() {
      console.log("输入框内容变化:", this.inputValue); // 打印当前输入框的值
    },
    // 表格选择变化时的回调
    handleSelectionChange(selection) {
      console.log("选中的行数据:", selection);
    }
  },
  created() {
    // 提前在 created 生命周期中绑定防抖函数
    this.debouncedInputChange = this.debounce(this.handleInputChange, 300);
    console.log("防抖函数已绑定"); // 调试信息
  }
};
</script>

<style>
#app {
  /* 应用的基础样式 */
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
